<template>
  <el-dialog
      v-model="dialogVisible"
      title="文章预览"
      width="60%"
      :before-close="handleClose"
      @open="open"
  >
    <h1 class="title">{{ artDetail.data.title }}</h1>
    <div class="info">
        <span>作者：{{ artDetail.data.nickname || artDetail.data.username }}</span>
        <span>发布时间：{{ filterDay(artDetail.data.pub_date) }}</span>
        <span>所属分类：{{ artDetail.data.cate_name }}</span>
        <span>状态：{{ artDetail.data.state }}</span>
    </div>
    <el-divider></el-divider>
    <div style="display: flex; justify-content: center">
      <img :src="BaseURL + artDetail.data.cover_img" alt="" class="imgBox" />
    </div>
    <div style="display: flex; justify-content: center;margin-top: 20px">
      <div v-html="artDetail.data.content" class="detail-box"></div>
    </div>
  </el-dialog>
</template>

<script>
import { reactive, ref, watch } from "vue";
import { ArticleDetail } from "@/api";
import { URL } from '@/api/config'
import dayjs from 'dayjs'

export default {
  name: "UIndex",
  props:['id', 'isShowDetail'],
  setup(props, context){

    /*
    * 状态
    * */
    // 控制dialog打开关闭
    let dialogVisible = ref(false)

    // 获取到的详情列表
    let artDetail = reactive({data:{}})

    // 获取图片基地址
    let BaseURL = ref(URL)


    /*
    * 方法
    * */
    // 获取文章信息
    const getArticleDetail = async () => {
      artDetail.length = 0
      const res = await ArticleDetail({id: props.id})
      artDetail.data = res.data
    }

    // 打开dialog的回调
    const open = async() => {
      await getArticleDetail({id: props.id})
    }

    // 关闭dialog的回调
    const handleClose = () => {
      dialogVisible.value = false
      context.emit('closeDetailDialog')
      artDetail.data = {}
    }

    // 表格时间格式化
    const filterDay = (day) => {
      return dayjs(day).format('YYYY-MM-DD HH:mm:ss')
    }

    /*
    * computed及watch
    * */
    watch(() => props.isShowDetail,(a) => {
      dialogVisible.value = a
    })


    /*
    * 生命周期
    * */
    return{
      dialogVisible,
      artDetail,
      BaseURL,
      open,
      handleClose,
      filterDay
    }
  }
}
</script>

<style scoped lang="less">
.el-table{
  margin-top: 50px;
}
.title {
  font-size: 24px;
  text-align: center;
  font-weight: normal;
  color: #000;
  margin: 0 0 10px 0;
}

.info {
  font-size: 12px;
  text-align: center;
  span {
    margin-right: 20px;
  }
}

img {
  width: 300px;
}
</style>
